<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style type="text/css">
        table{
            text-align: center;
        }
        table td{
            padding: 2px 5px;
        }
        .my-body tr:nth-child(odd){
            background: #ecc3c3;
        }
        .my-body tr:hover{
            background: #a2ece6;
        }
        a{
            color: #000;
        }
        .span{
            border: 1px solid #000;
            margin: 0 5px;
            z-index: 100;
        }

        /*# 模太框*/
        #update-model{
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background: 
        }
    </style>
</head>
<body>
<h3>Test page</h3>
<h3>my users info table</h3>
<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>edit</th>
        </tr>
    </thead>
    <tbody id="my-user-info" class="my-body">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

<br>

<h3>my test info table</h3>
<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>UUTTYPE</th>
            <th>SN</th>
            <th>PRODUCT NAME</th>
            <th>Date</th>
            <th>edit</th>
        </tr>
    </thead>
    <tbody id="get-test-info" class="my-body">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>
                <a class="update-btn" href="/show_update?id=1">update</a> 
                <span class="span"></span>
                <a class="del-btn" href="/del?id=1">del</a>
            </td>
        </tr>
    </tbody>
</table>

 <div id="update-model" >
    <div class="model-inner">
        <form action="/test_info_update">
            uuttype: <input type="text" name="uuttype"><br>
            sn: <input type="text" name="sn"><br>
            product name: <input type="text" name="product_name"><br>

            <input type="submit" value="update"><br>
        </form>
        <h3 style="display:none">Update successful</h3> 
    </div>    
 </div>



<script src="/static/js/jquery-3.3.1.min.js"></script>

<script>
    $(function(){
        $.ajax({
            url:'/ajax_test_handle',
            type:'get',
            dataType:'json',
            async:true,
            success:function(data){
                console.log(data)
                // 遍历test_info 数组
                test_html = ''
                var test_data = data.test
                console.log(test_data)
                for(var i=0;i<test_data.length;i++){
                    test_html+=`
                        <tr>
                            <td>${test_data[i][0]}</td>
                            <td>${test_data[i][1]}</td>
                            <td>${test_data[i][2]}</td>
                            <td>${test_data[i][3]}</td>
                            <td>${test_data[i][4]}</td>
                            <td>
                                <a class="update-btn" data-id=${test_data[i][0]} href="/show_test_info_update?id=${test_data[i][0]}">update</a>
                                <span class="span"></span>
                                <a class="del-btn" data-id=${test_data[i][0]} href="/test_del?id=${test_data[i][0]}">del</a>
                            </td>
                        </tr>
                    `
                }
                $("#get-test-info").html(test_html)

                // 遍历user_info 数组
                var users_html = ''
                var users_data = data.user
                console.log(users_data)
                for(var i=0;i<users_data.length;i++){
                    users_html +=`
                        <tr>
                            <td>${users_data[i][0]}</td>
                            <td>${users_data[i][1]}</td>
                            <td>
                                <a class="update-btn" data-id=${users_data[i][0]} href="/show_user_update?id=${users_data[i][0]}">update</a>
                                <span class="span"></span>
                                <a class="del-btn" data-id=${users_data[i][0]} href="/user_del?id=${users_data[i][0]}">del</a>
                            </td>
                        </tr>
                    ` 
                }
                $("#my-user-info").html(users_html)

            },
            complete:function(){console.log("complete")},
            error:function(error){
            console.log("error is "+error[0])
            }

        })

        // 点击update 弹出模太框
        $("#get-test-info").on("click",".update-btn",function(e){
            //阻止默认事件
            e.preventDefault()
            // 获取当前点击行的id
            // console.log($(this).attr('data-id'))
            id = $(this).attr('data-id')

            $.ajax({
                url:'/show_test_info_update?id='+id,
                type:'get',
                dataType:'json',
                async:true,
                success:function(data){
                    console.log(data)

                },
                complete:function(){console.log("complete")},
                error:function(error){
                console.log("error is "+error[0])
                }
            })


        })


    })

</script>
</body>
</html>